<template>
		<view class="content">
			<view class="nav" style="background-color: #64c8fa;background: linear-gradient(to bottom, #56ccf2, #2f80ed);">
				<!-- 选项卡水平方向滑动，scroll-with-animation是滑动到下一个选项时，有一个延时效果 -->
				
				<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft" >
					<view class="tab-scroll_box">
						<!-- 选项卡类别列表 -->
						<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==index}" @click="chenked(index)">
								{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<!-- 选项卡内容轮播滑动显示，current为当前第几个swiper子项 -->
			<swiper @change="change" :current="isActive" class="swiper-content" :style="fullHeight">
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;" class="back">
						
					<view class="nav_item" >
						
						<view v-if="now" style="color: black;font-size: 23px;display: flex;">
						<view class="title3">{{ now.temp }}</view>
						<view style="display: flex;font-weight: bolder;">°C
						<view style="font-size: 25px;margin-top: 55px;margin-left: -15px;">{{now.text}}</view>	
						<view style="margin-left: 50px;margin-top: 30px;font-size: 20px;">{{ City }} {{ County }}</view>
								<image src="../../static/icon/定位.svg" style="height: 22px;width: 22px;margin-top: 30px"@click="getLocation"></image>
						</view>
															
						</view>
					
					<view class="model_scrollx flex_row">
						<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
						<view class="scrollx_items">
							<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
								<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/风力 (1).svg"></image>
								<view style="font-size: 18px;font-weight: bolder;"> {{now.windScale}}级</view>
								 <text style="font-size: 12px;margin-bottom: 5px;">风力</text>
								</view>
						</view>
						<view class="scrollx_items">
							<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
								<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/风力 (1).svg"></image>
								<view style="font-size: 18px;font-weight: bolder;"> {{now.windDir}}</view>
								 <text style="font-size: 12px;margin-bottom: 5px;">风向</text>
								</view>
						</view>
						<view class="scrollx_items">
							<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
								<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
								<view style="font-size: 18px;font-weight: bolder;"> {{now.feelsLike}}℃</view>
								 <text style="font-size: 12px;margin-bottom: 5px;">体感温度</text>
								</view>
						</view>
						<view class="scrollx_items">
							<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
								<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/湿度 (1).svg"></image>
								<view style="font-size: 18px;font-weight: bolder;"> {{now.humidity}}%</view>
								 <text style="font-size: 12px;margin-bottom: 5px;">湿度</text>
								</view>
						</view>
						<view class="scrollx_items">
							<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
								<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
								<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
								 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
								</view>
						</view>
						<view class="scrollx_items">
							<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
								<image mode="widthFix" style="height: 26px;margin-bottom: 3px;" src="../../static/life/能见度 (1).svg"></image>
								<view style="font-size: 18px;font-weight: bolder;"> {{now.vis}}公里</view>
								 <text style="font-size: 12px;margin-bottom: 5px;">能见度</text>
								</view>
						</view>
						</scroll-view>
					</view>
					
				
						
					 
					</view>		
					</scroll-view>	
				</swiper-item>
				
				
				
			
				
				<swiper-item class="swiperitem-content">
					<scroll-view scroll-y style="height: 100%;background-color: skyblue">
						<view class="nav_item" >
							<view style="background-color: rgb(0, 97, 204); height: 100%;">
									<view style="padding:10px;">
										<view style="padding: 15px; border-radius:5px; background-color: #fff; ">
											<view v-for="(item,index) in daily" :key="index">
												<view style="padding:8px 0; display: flex; border-bottom: 1px solid #f1f1f1; font-size: 14px;">
													<view style="width: 30%;font-size:13px;">{{item.date}}<br>{{item.dateToString}}</view>
													<view style="width: 40%; text-align: left;font-size: 14px;">
														<image :src="`/static/icons/${item.iconDay}.svg`" mode="widthFix" style="width: 42rpx; vertical-align: middle;">
														</image> {{item.textDay}}
													</view>
													<view style="width: 30%; text-align: center;">
														<text>{{item.tempMin}}° ~ {{item.tempMax }}°</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
							
						</view>
					</scroll-view>
				</swiper-item>
				
				
				
				
				
				
			<swiper-item class="swiperitem-content">
							<scroll-view scroll-y style="height: 100%;" class="back2">
								
							<view class="nav_item" >
								
								<view v-if="now" style="color: black;font-size: 23px;">
								<view style="font-weight: bolder;font-size: 35px;display: flex;justify-content: center;align-items: center;
			margin-top: 10px;">{{indices[0].category}}</view>
								
					<view style="font-size: 15px;font-weight: bolder;margin-top: 15px;align-items: center;justify-content: center;display: flex;">{{indices[0].text}}</view>	
																	
				</view>
							<view style="margin-top: 10px;width: 100%;">
										<swiper  circular autoplay :interval="3000" :duration="500"  indicator-dots="indicatorDots" style="height: 300rpx;"
										indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
											<swiper-item v-for="item in imgs2" :key="item">
												<image :src="item" alt="" mode="widthFix" style="width: 100%"/>
											</swiper-item>
											
										</swiper>
									</view>
							<view class="model_scrollx flex_row">
								<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/天气-13.svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{now.text}}</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">天气状况</text>
										</view>
								</view>
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{now.temp}}</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">温度</text>
										</view>
								</view>
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/空气质量.svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{indexes.category}}</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">空气质量</text>
										</view>
								</view>
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
										</view>
								</view>
								
								</scroll-view>
							</view>
							
											
								
							 
							</view>		
							</scroll-view>	
							</swiper-item>
							
				
				
				<swiper-item class="swiperitem-content">
								<scroll-view scroll-y style="height: 100%;" class="back1">
									
								<view class="nav_item" >
									
									<view v-if="now" style="color: black;font-size: 23px;">
									<view style="font-weight: bolder;font-size: 35px;display: flex;justify-content: center;align-items: center;
				margin-top: 10px;">{{indices[3].category}}</view>
									
						<view style="font-size: 15px;font-weight: bolder;margin-top: 15px;align-items: center;justify-content: center;display: flex;">{{indices[3].text}}</view>	
																		
					</view>
								<view style="margin-top: 10px;width: 100%;">
											<swiper  circular autoplay :interval="3000" :duration="500"  indicator-dots="indicatorDots" style="height: 300rpx;"
											indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
												<swiper-item v-for="item in imgs" :key="item">
													<image :src="item" alt="" mode="widthFix" style="width: 100%"/>
												</swiper-item>
												
											</swiper>
										</view>
								<view class="model_scrollx flex_row">
									<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/天气-13.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.text}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">天气状况</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.temp}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">温度</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/空气质量.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{indexes.category}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">空气质量</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
											</view>
									</view>
									
									</scroll-view>
								</view>
								
												
									
								 
								</view>		
								</scroll-view>	
								</swiper-item>
								
				
				
			<swiper-item class="swiperitem-content">
							<scroll-view scroll-y style="height: 100%;" class="back3">
								
							<view class="nav_item" >
								
								<view v-if="now" style="color: black;font-size: 23px;">
								<view style="font-weight: bolder;font-size: 35px;display: flex;justify-content: center;align-items: center;
			margin-top: 10px;">{{indices[1].category}}</view>
								
					<view style="font-size: 15px;font-weight: bolder;margin-top: 15px;align-items: center;justify-content: center;display: flex;">{{indices[1].text}}</view>	
																	
				</view>
							<view style="margin-top: 10px;width: 100%;">
										<swiper  circular autoplay :interval="3000" :duration="500"  indicator-dots="indicatorDots" style="height: 300rpx;"
										indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
											<swiper-item v-for="item in imgs3" :key="item">
												<image :src="item" alt="" mode="widthFix" style="width: 100%"/>
											</swiper-item>
											
										</swiper>
									</view>
							<view class="model_scrollx flex_row">
								<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/天气-13.svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{now.text}}</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">天气状况</text>
										</view>
								</view>
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{now.temp}}</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">温度</text>
										</view>
								</view>
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/空气质量.svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{indexes.category}}</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">空气质量</text>
										</view>
								</view>
								<view class="scrollx_items">
									<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
										<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
										<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
										 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
										</view>
								</view>
								
								</scroll-view>
							</view>
							
											
								
							 
							</view>		
							</scroll-view>	
							</swiper-item>
							
				
				
				<swiper-item class="swiperitem-content">
								<scroll-view scroll-y style="height: 100%;" class="back4">
									
								<view class="nav_item" >
									
									<view v-if="now" style="color: black;font-size: 23px;">
									<view style="font-weight: bolder;font-size: 35px;display: flex;justify-content: center;align-items: center;
				margin-top: 10px;">{{indices[5].category}}</view>
									
						<view style="font-size: 15px;font-weight: bolder;margin-top: 15px;align-items: center;justify-content: center;display: flex;">{{indices[5].text}}</view>	
																		
					</view>
								<view style="margin-top: 10px;width: 100%;">
											<swiper  circular autoplay :interval="3000" :duration="500"  indicator-dots="indicatorDots" style="height: 300rpx;"
											indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
												<swiper-item v-for="item in imgs4" :key="item">
													<image :src="item" alt="" mode="widthFix" style="width: 100%"/>
												</swiper-item>
												
											</swiper>
										</view>
								<view class="model_scrollx flex_row">
									<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/天气-13.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.text}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">天气状况</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.temp}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">温度</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/空气质量.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{indexes.category}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">空气质量</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
											</view>
									</view>
									
									</scroll-view>
								</view>
								
												
									
								 
								</view>		
								</scroll-view>	
								</swiper-item>
				<swiper-item class="swiperitem-content">
								<scroll-view scroll-y style="height: 100%;" class="back5">
									
								<view class="nav_item" >
									
									<view v-if="now" style="color: black;font-size: 23px;">
									<view style="font-weight: bolder;font-size: 35px;display: flex;justify-content: center;align-items: center;
				margin-top: 10px;">{{indices[2].category}}</view>
									
						<view style="font-size: 15px;font-weight: bolder;margin-top: 15px;align-items: center;justify-content: center;display: flex;">{{indices[2].text}}</view>	
																		
					</view>
								<view style="margin-top: 10px;width: 100%;">
											<swiper  circular autoplay :interval="3000" :duration="500"  indicator-dots="indicatorDots" style="height: 300rpx;"
											indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
												<swiper-item v-for="item in imgs5" :key="item">
													<image :src="item" alt="" mode="widthFix" style="width: 100%"/>
												</swiper-item>
												
											</swiper>
										</view>
								<view class="model_scrollx flex_row">
									<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/天气-13.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.text}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">天气状况</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.temp}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">温度</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/空气质量.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{indexes.category}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">空气质量</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
											</view>
									</view>
									
									</scroll-view>
								</view>
								
												
									
								 
								</view>		
								</scroll-view>	
								</swiper-item>
				<swiper-item class="swiperitem-content">
								<scroll-view scroll-y style="height: 100%;" class="back6">
									
								<view class="nav_item" >
									
									<view v-if="now" style="color: black;font-size: 23px;">
									<view style="font-weight: bolder;font-size: 35px;display: flex;justify-content: center;align-items: center;
				margin-top: 10px;">{{indices[8].category}}</view>
									
						<view style="font-size: 15px;font-weight: bolder;margin-top: 15px;align-items: center;justify-content: center;display: flex;">{{indices[8].text}}</view>	
																		
					</view>
								<view style="margin-top: 10px;width: 100%;">
											<swiper  circular autoplay :interval="3000" :duration="500"  indicator-dots="indicatorDots" style="height: 300rpx;"
											indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
												<swiper-item v-for="item in imgs6" :key="item">
													<image :src="item" alt="" mode="widthFix" style="width: 100%"/>
												</swiper-item>
												
											</swiper>
										</view>
								<view class="model_scrollx flex_row">
									<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/天气-13.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.text}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">天气状况</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.temp}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">温度</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/空气质量.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{indexes.category}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">空气质量</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
											</view>
									</view>
									
									</scroll-view>
								</view>
								
												
									
								 
								</view>		
								</scroll-view>	
								</swiper-item>
				<swiper-item class="swiperitem-content">
								<scroll-view scroll-y style="height: 100%;" class="back7">
									
								<view class="nav_item" >
									
									<view v-if="now" style="color: black;font-size: 23px;">
									<view style="font-weight: bolder;font-size: 35px;display: flex;justify-content: center;align-items: center;
				margin-top: 10px;">{{indices[14].category}}</view>
									
						<view style="font-size: 15px;font-weight: bolder;margin-top: 15px;align-items: center;justify-content: center;display: flex;">{{indices[14].text}}</view>	
																		
					</view>
								<view style="margin-top: 10px;width: 100%;">
											<swiper  circular autoplay :interval="3000" :duration="500"  indicator-dots="indicatorDots" style="height: 300rpx;"
											indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#3CB371">
												<swiper-item v-for="item in imgs7" :key="item">
													<image :src="item" alt="" mode="widthFix" style="width: 100%"/>
												</swiper-item>
												
											</swiper>
										</view>
								<view class="model_scrollx flex_row">
									<scroll-view class="uni-swiper-tab" scroll-x :style="'height:'+scrollH+'px'">
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/天气-13.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.text}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">天气状况</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/体感温度 (1).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{now.temp}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">温度</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/icon/空气质量.svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{indexes.category}}</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">空气质量</text>
											</view>
									</view>
									<view class="scrollx_items">
										<view class="guige1 guige-active" style="max-width: 80px;max-height: 130px;background-color: aliceblue;border-radius: 23px;">
											<image mode="widthFix" style="width: 23px;height: 23px;" src="../../static/life/紫外线 (2).svg"></image>
											<view style="font-size: 18px;font-weight: bolder;"> {{daily[0].uvIndex}}级</view>
											 <text style="font-size: 12px;margin-bottom: 5px;">紫外线</text>
											</view>
									</view>
									
									</scroll-view>
								</view>
								
												
									
								 
								</view>		
								</scroll-view>	
								</swiper-item>
			</swiper>
		</view>
					
			
</template>

<script>
	const APIKEY = 'baf7fbe99ad449c893e017c5b27617ef' ;// 填入你申请的KEY
	export default {
		watch:{
			// swiper与上面选项卡联动
			currentindex(newval){
				this.isActive = newval;
				this.scrollLeft = 0;
				// 滑动swiper后，每个选项距离其父元素最左侧的距离
				for (let i = 0; i < newval - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
		},
		data() {
			return {
				imgs:[
					"https://tse3-mm.cn.bing.net/th/id/OIP-C.Xzhxo_SjLTwFq37v4xBq-AAAAA?w=242&h=161&c=7&r=0&o=5&dpr=1.5&pid=1.7",
					"https://tse1-mm.cn.bing.net/th/id/OIP-C.rfiSYi6YkiF5Syaljd-NRwHaFL?w=260&h=182&c=7&r=0&o=5&dpr=1.5&pid=1.7",
					"https://tse3-mm.cn.bing.net/th/id/OIP-C.BB3Q9nIR_fuPoAggIgj-4AHaE8?w=261&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
				],
				imgs2:[
					"https://img1.baidu.com/it/u=3791479147,129407570&fm=253&fmt=auto?w=1200&h=700",
					"https://img0.baidu.com/it/u=2997348650,2986407291&fm=253&fmt=auto?w=1420&h=800",
					"https://img1.baidu.com/it/u=1801069983,3571682788&fm=253&fmt=auto&app=138&f=JPEG?w=821&h=500",
					"https://img1.baidu.com/it/u=1750662834,1808470970&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
				],
				imgs3:[
					"https://img2.baidu.com/it/u=921951112,128793063&fm=253&fmt=auto&app=120&f=JPEG?w=1119&h=684",
					"https://img1.baidu.com/it/u=1811026041,3453071563&fm=253&fmt=auto&app=138&f=JPEG?w=714&h=500",
					"https://img0.baidu.com/it/u=2838242372,2149366087&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=400",
					
				],
				imgs4:[
					"https://img1.baidu.com/it/u=3625494931,3344070197&fm=253&fmt=auto&app=138&f=JPEG?w=1000&h=500",
					"https://img2.baidu.com/it/u=1248376340,3227351748&fm=253&fmt=auto&app=120&f=JPEG?w=660&h=372",
					"https://img2.baidu.com/it/u=2584871235,2451189041&fm=253&fmt=auto&app=120&f=JPEG?w=713&h=500",
					"https://img0.baidu.com/it/u=1285843975,3634773318&fm=253&fmt=auto?w=607&h=369",
					
				],
				imgs5:[
					"https://img2.baidu.com/it/u=3697792075,1589526839&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
					"https://img1.baidu.com/it/u=153827291,2059605931&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500",
					"https://img1.baidu.com/it/u=1863700861,1547099389&fm=253&fmt=auto&app=138&f=JPEG?w=660&h=371",
					
					
				],
				imgs6:[
					"https://img2.baidu.com/it/u=1963837809,2781097194&fm=253&fmt=auto&app=138&f=JPEG?w=729&h=452",
					"https://img0.baidu.com/it/u=3950027835,2976880260&fm=253&fmt=auto&app=120&f=JPEG?w=607&h=405",
					"https://img0.baidu.com/it/u=1563962160,3513820191&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=353",
					
					
				],
				imgs7:[
					"https://img2.baidu.com/it/u=2990945023,678172471&fm=253&fmt=auto&app=120&f=JPEG?w=976&h=500",
					"https://img2.baidu.com/it/u=2512711115,516410716&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
					"https://img2.baidu.com/it/u=208021895,1720022263&fm=253&fmt=auto&app=120&f=JPEG?w=759&h=425",
					
					
				],
				currenttime:'',
					location: '',
					type:'',
					now: '',
					hourly: '',
					daily: '',
					City: '',
					County: '',
				tempMax:'',
				tempMin:'',
				warn:'',
				indexes:'',
				indices:[],
						scrollH: 130, // 高度
							
				 user: uni.getStorageSync('weather2024'),
				isActive: 0,
					index: 0,
					currentindex:0,
					category:[
						{
							id:1,
							name:'实况天气',
						},
						{
							id:2,
							name:'每日天气',
						},
						{
							id:3,
							name:'运动',
						},
						{
							id:4,
							name:'钓鱼',
						},
						{
							id:5,
							name:'洗车',
						},
						{
							id:6,
							name:'旅游',
						},
						{
							id:7,
							name:'穿衣',
						},
						{
							id:8,
							name:'感冒',
						},
						{
							id:9,
							name:'交通',
						},
						
						
					],
					contentScrollW: 0, // 导航区宽度
					scrollLeft: 0, // 横向滚动条位置
					fullHeight:"",	
				
			}
		},
		  mounted() {
		  	var that = this;
		  	 //获取手机屏幕的高度，让其等于swiper的高度，从而使屏幕充满
		  	uni.getSystemInfo({
		  	      success: function (res) {
		  		         that.fullHeight ="height:" + res.windowHeight + "px";
		  		  }
		  		});
		  	// 获取标题区域宽度，和每个子元素节点的宽度
		  	this.getScrollW()
		  },
			onLoad() {
				this.getLocation();
				
				},	  
		created(){
		wx.showShareMenu({
			withShareTicket:true,
			menus:['shareAppMessage','shareTimeline']
		});	
		},
		onShareAppMessage(res){
			return{
				title: this.title,
				imageUrl:this.thumb
			}
		},
		onShareTimeline(res){
			return{
				title: this.title,
				imageUrl:this.thumb
			}
		},
		onShow(){
			  this.user= uni.getStorageSync('weather2024')
		},
		methods: {
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(index) {
				this.isActive = index;
				this.scrollLeft = 0;
				for (let i = 0; i < index - 1; i++) {
					this.scrollLeft += this.category[i].width
				};
			},
			// swiper滑动时，获取其索引，也就是第几个
			change(e){
				const {current} = e.detail;
				this.currentindex = current;
			},	
			onClick(e){
							console.log(e)
						},
						actionsClick(text){
							uni.showToast({
								title:text,
								icon:'none'
							})
						},
			/**
			 * 获取定位
			 */
			getLocation() {
				var that = this;
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						that.location = res.longitude + ',' + res.latitude;
						that.latitude=res.latitude;
						that.longitude=res.longitude;
						that.getWeather();
						that.getCityByLoaction();
						that.getWeatherIndices();
						that.getIndexes();
						},
					fail(err) {
						uni.showModal({
							title: '获取定位信息失败',
							content: '为了给您提供准确的天气预报服务,请在设置中授权【位置信息】',
							success(mRes) {
								if (mRes.confirm) {
									uni.openSetting({
										success: function (data) {
											if (data.authSetting['scope.userLocation'] === true) {
												uni.showToast({
													title: '授权成功',
													icon: 'success',
													duration: 1000
												});
												that.getLocation();
											} else {
												uni.showToast({
													title: '授权失败',
													icon: 'none',
													duration: 1000
												});
												that.location = '地理位置';
												that.getWeather();
												that.getCityByLoaction();
											}
										},
										fail(err) {
											console.log(err);
											uni.showToast({
												title: '唤起设置页失败，请手动打开',
												icon: 'none',
												duration: 1000
											});
											that.location = '地理位置';
											that.getWeather();
											that.getCityByLoaction();
										}
									});
								} else if (mRes.cancel) {
									that.location = '地理位置';
									that.getWeather();
									that.getCityByLoaction();
								}
							}
						});
					}
				});
			},
			/**
			 * 根据坐标获取城市信息
			 */
			getCityByLoaction() {
				var that = this;
				uni.request({
					url:
						'https://geoapi.qweather.com/v2/city/lookup?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						if (res.code == '200') {
							var data = res.location[0];
							that.City = data.adm2;
							that.County = data.name;
						} else {
							uni.showToast({
								title: '获取城市信息失败',
								icon: 'none'
							});
						}
					}
				});
			},
			/**
			 * 获取天气
			 */
			getWeather() {
				var that = this;
				uni.showLoading({
					title: '加载中'
				});
				uni.request({
					url:
						'https://devapi.qweather.com/v7/weather/now?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						that.now = res.now;
					}
				});
				uni.request({
					url:
						'https://devapi.qweather.com/v7/weather/24h?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						res.hourly.forEach(function (item) {
							item.time = that.formatTime(new Date(item.fxTime)).hourly;
						});
						that.hourly = res.hourly;
					}
				});
				
				uni.request({
					url:
						'https://devapi.qweather.com/v7/weather/7d?key=' +
						APIKEY +
						'&location=' +
						that.location,
					success(result) {
						var res = result.data;
						res.daily.forEach(function (item) {
							item.date = that.formatTime(new Date(item.fxDate)).daily;
							item.dateToString = that.formatTime(new Date(item.fxDate)).dailyToString;
						});
						that.tempMax=res.daily[0].tempMax;
						that.tempMin=res.daily[0].tempMin;
						
						that.daily = res.daily;
						uni.hideLoading();
					}
				});
			},
			//空气质量
			getIndexes(){
				var that = this;
				uni.request({
					url:
						'https://devapi.qweather.com/airquality/v1/current/'+that.latitude+'/'+that.longitude+'/?key='+APIKEY ,
						success(result){
							
							var res=result.data;
										that.indexes=res.indexes[0];
						}
				});
			},
			getWeatherIndices(){
				var that = this;
				uni.request({
					url:
						'https://devapi.qweather.com/v7/indices/1d?key=' +
						APIKEY + 
						'&location=' +that.location+'&type=0',
						success(result){
							console.log(result)
							var res=result.data;
							
							that.indices=res.daily;
							uni.hideLoading();
						}
				});
			},
			// 格式时间
			formatTime(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				const weekArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				const isToday = date.setHours(0, 0, 0, 0) == new Date().setHours(0, 0, 0, 0);
				return {
					hourly: [hour, minute].map(this.formatNumber).join(':'),
					daily: [month, day].map(this.formatNumber).join('-'),
					dailyToString: isToday ? '今天' : weekArray[date.getDay()]
				};
			},
			// 补零
			formatNumber(n) {
				n = n.toString();
				return n[1] ? n : '0' + n;
			}			
						
		}
	}
</script>

<style lang="scss">
.back{
	background-image: url(https://tse1-mm.cn.bing.net/th/id/OIP-C.HHJ2-9O8iUP0uiNLgebcIQHaNe?w=185&h=337&c=7&r=0&o=5&dpr=1.5&pid=1.7);
	background-size: cover;
}
.back1{
	background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.kWXeV8BUvF9HP2dYTqYQBAHaEK?w=326&h=183&c=7&r=0&o=5&dpr=1.5&pid=1.7);
	background-size: cover;
}
.back2{
	background-image: url(https://img0.baidu.com/it/u=1190681922,2073470068&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=668);
	background-size: cover;
}
.back3{
	background-image: url(https://img2.baidu.com/it/u=3896970235,344369562&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=882);
	background-size: cover;
}
.back4{
	background-image: url(https://img1.baidu.com/it/u=3438025248,321227875&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1422);
	background-size: cover;
}
.back5{
	background-image: url(https://img1.baidu.com/it/u=1297800178,386513646&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667);
	background-size: cover;
}
.back6{
	background-image: url(https://img2.baidu.com/it/u=1755296913,3303560810&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400);
	background-size: cover;
}
.back7{
	background-image: url(https://img1.baidu.com/it/u=796326109,84262745&fm=253&fmt=auto&app=138&f=JPEG?w=380&h=582);
	background-size: cover;
}
	.uni-swiper-tab{
		white-space: nowrap;
	}
	.model_scrollx{
		justify-content: space-between;
		height: 45px;
		/* background-color: #F1EFEF; */
		align-items: center;
		margin-top: 22px;
	}
	.scrollx_items{
		text-align: center;
		display: inline-block;
		width: 210rpx;
		box-sizing: border-box;
		
		margin-top: 15px;
	}
	.scrollx_items:last-child{
		margin-right: 30rpx;
	}
	.scrollx_items image{
		width: 70rpx;
		height: 66rpx;
	}
	.tgyx_title{
		font-size: 28rpx;
		color: #333333;
		margin-top: 30rpx;
	}
	.tgyx_desc{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
 .card-wrap {
	width: 690rpx;
	border-radius: 18rpx;
	background-color: #ffffff;
	box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.2);
	overflow-x: auto;
	white-space: nowrap;
	font-family: "Times New Roman", Times, serif;
	font-weight: bolder;
} 
.title3{
	  	 
	  			font-family:  "Times New Roman", Times, serif;
	  			font-weight: bolder;
	  			font-size: 80px;
	  			display: flex;
	  			justify-content: center;
	  			align-items: center;
				margin-top: 10px;
	  	}
		.card-actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.card-actions-item-text {
				font-size: 12px;
				color: #666;
				margin-left: 5px;
			}
				.custom-cover {
					flex: 1;
					flex-direction: row;
					position: relative;
				}
			
				.cover-content {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 40px;
					background-color: rgba($color: #000000, $alpha: 0.4);
					display: flex;
					flex-direction: row;
					align-items: center;
					padding-left: 15px;
					font-size: 14px;
					color: #fff;
				}
			
				.card-actions {
					display: flex;
					flex-direction: row;
					justify-content: space-around;
					align-items: center;
					height: 45px;
					border-top: 1px #eee solid;
				}
				.card-actions-item-text {
						font-size: 12px;
						color: #666;
						margin-left: 5px;
					}
				.cover-image {
						flex: 1;
						height: 150px;
					}
					.no-border {
						border-width: 0;
					}
					page{
						height: 100%;
						display: flex;
						
					}
					.content{
						display: flex;
						flex-direction: column;
						width: 100%;
						flex: 1;
						.nav{
							border-top: 1rpx solid #f2f2f2;
							
							position: fixed;
							z-index: 99;
							width: 100%;
							align-items: center;
							height: 118rpx;
							.tab-scroll{
								flex: 1;
								overflow: hidden;
								box-sizing: border-box;
								padding-left: 30rpx;
								padding-right: 30rpx;
								.tab-scroll_box{
									display: flex;
									align-items: center;
									flex-wrap: nowrap;
									box-sizing: border-box;
									.tab-scroll_item{
										line-height: 60rpx;
										margin-right: 35rpx;
										flex-shrink: 0;
										padding-bottom:10px;
										display: flex;
										justify-content: center;
										font-size: 16px;
										padding-top: 10px;
									}
								}
							}
						}
						.swiper-content{
							   padding-top: 120rpx;
							   flex: 1;
							.swiperitem-content{
							   
								.nav_item{	
									
									padding:20rpx 40rpx 0rpx 40rpx ;
								}
							}
						}	
					}
					.active {
						position: relative;
						
						font-weight: 600;
					}
					.active::after {
						content: "";
						position: absolute;
						width: 130rpx;
						height: 4rpx;
						
						left: 0px;
						right: 0px;
						bottom: 0px;
						margin: auto;
					}
					/* 隐藏滚动条，但依旧具备可以滚动的功能 */
					/deep/.uni-scroll-view::-webkit-scrollbar {
						display: none
					}
					
</style>
